<template>

<!-- 先判断 roleName 是否有值，无值时显示加载中 -->
<div v-if="!roleName">
  <el-loading v-loading="true" element-loading-text="加载中...">
    <div style="height: 1000px;"></div> <!-- 占位高度，避免布局抖动 -->
  </el-loading>
</div>

  <div class="other" v-if="roleName === '护理员'">
    <div class="result">
      <h2>审批结果</h2>
    </div>
    <div class="ca">
      <img src="/src/assets/images/注意1.png">
      <div>
        <h3>审批中</h3>
      </div>
      <div class="oth">稍等，退住申请单正在审批中，若该申请单长时间未处理，请联系(审批角色)！</div>
      <!-- 操作记录区域 -->
      <el-card class="operation-record-card">
        <div class="record-header">
          <h3>操作记录</h3>
          <div class="record-status">
            <span class="status-badge processing">审批中</span>
          </div>
        </div>
        <div class="record-timeline" v-if="operationRecords.length">
          <div 
            v-for="(record, index) in operationRecords" 
            :key="index"
            class="timeline-item"
            :class="{ 
              'completed': record.personStatus.includes('已发起') || record.personStatus.includes('已通过') || record.personStatus.includes('已完成'),
              'processing': record.personStatus.includes('审批中') || record.personStatus.includes('已拒绝')
            }"
          >
            <div class="timeline-dot">
              <el-icon 
                :color="record.personStatus.includes('已拒绝') ? '#f56c6c' : (record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成') ? '#67c23a' : '#409eff')" 
                size="16"
              >
                <Check v-if="record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成')" />
                <Close v-else-if="record.personStatus.includes('已拒绝')" />
                <Clock v-else />
              </el-icon>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">{{ record.content }}</div>
              <div class="timeline-desc">{{ record.personStatus }}</div>
              <div class="timeline-time">{{ record.time || '-' }}</div>
              <div class="timeline-opinion" v-if="record.opinion && record.opinion !== '-'">
                <div class="opinion-label">审批意见：</div>
                <div class="opinion-content">{{ record.opinion }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="loading-tip">加载中...</div>
      </el-card>
    </div>
  </div>


  <div class="drop4-page" v-else>
    <!-- 基本信息、申请信息、解除记录区域 -->
    <div class="left-section">
      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <h3>基本信息</h3>
        <ul class="info-list">
          <li><span class="label">老人姓名</span><span class="value">{{ basicInfo.elderName || '-' }}</span></li>
          <li><span class="label">老人身份证号</span><span class="value">{{ basicInfo.idCard || '-' }}</span></li>
          <li><span class="label">联系方式</span><span class="value">{{ basicInfo.phone || '-' }}</span></li>
          <li><span class="label">费用期限</span><span class="value">{{ basicInfo.feePeriod || '-' }}</span></li>
          <li><span class="label">护理等级</span><span class="value">{{ basicInfo.nursingLevel || '-' }}</span></li>
          <li><span class="label">入住床位</span><span class="value">{{ basicInfo.bed || '-' }}床位</span></li>
          <li><span class="label">签约合同</span><span class="value">{{ basicInfo.contract || '-' }} <a href="#"
                class="view-link">查看</a></span></li>
          <li><span class="label">养老顾问</span><span class="value">{{ basicInfo.advisor || '-' }}</span></li>
          <li><span class="label">护理员</span><span class="value">{{ basicInfo.nurse || '-' }}</span></li>
        </ul>
      </el-card>

      <!-- 申请信息卡片 -->
      <el-card class="info-card">
        <h3>申请信息</h3>
        <ul class="info-list">
          <li><span class="label">退住日期</span><span class="value">{{ applyInfo.checkoutDate || '-' }}</span></li>
          <li><span class="label">退住原因</span><span class="value">{{ formatReason(applyInfo.reason) || '-' }}</span></li>
          <li><span class="label">备注</span><span class="value">{{ applyInfo.remark || '-' }}</span></li>
          <li><span class="label">申请人</span><span class="value">{{ applyInfo.applyName || '-' }}</span></li>
          <li><span class="label">申请时间</span><span class="value">{{ applyInfo.applyTime || '-' }}</span></li>
        </ul>
      </el-card>

      <!-- 解除记录卡片 -->
      <el-card class="info-card">
        <h3>解除记录</h3>
        <ul class="info-list">
          <li><span class="label">提交人</span><span class="value">{{ dissolutionInfo.dissolutionSubmitter || '-' }}</span>
          </li>
          <li><span class="label">解除日期</span><span class="value">{{ dissolutionInfo.dissolutionDate || '-' }}</span>
          </li>
          <li><span class="label">解除协议</span><span class="value">
            <template v-if="dissolutionInfo.dissolutionFile">
              <a :href="getFileUrl(dissolutionInfo.dissolutionFile)" target="_blank" class="view-link">查看</a>
            </template>
            <span v-else>-</span>
          </span></li>
        </ul>
      </el-card>
    </div>

    <!-- 操作记录区域 -->
    <div class="right-section">
      <el-card class="operation-record-card">
        <div class="record-header">
          <h3>操作记录</h3>
          <div class="record-status">
            <span class="status-badge completed">已完成</span>
          </div>
        </div>
        <div class="record-timeline" v-if="operationRecords.length">
          <div v-for="(record, index) in operationRecords" :key="index" class="timeline-item completed">
            <div class="timeline-dot">
              <el-icon :color="record.personStatus && record.personStatus.includes('已拒绝') ? '#f56c6c' : '#67c23a'" size="16">
                <Check v-if="record.personStatus && (record.personStatus.includes('已发起') || record.personStatus.includes('已通过'))" />
                <Close v-else-if="record.personStatus && record.personStatus.includes('已拒绝')" />
                <Clock v-else />
              </el-icon>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">{{ record.content }}</div>
              <div class="timeline-desc">{{ record.personStatus }}</div>
              <div class="timeline-time" v-if="record.time">{{ record.time }}</div>
              <div class="timeline-opinion" v-if="record.opinion && record.opinion !== '-'">
                <div class="timeline-opinion-label">审批意见：</div>
                <div class="timeline-opinion-text">{{ record.opinion }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="loading-tip">加载中...</div>
      </el-card>
    </div>

    <!-- 调整费用账单区域 -->
    <div class="adjust-fee-section">
      <h3>调整费用账单</h3>
      <p class="tip"><img src="@/assets/images/注意.png" alt="">提交账单审批前，需在队列列表中处理未缴账单，若未处理，则无法提交</p>

      <!-- 应退部分 -->
      <el-card class="fee-card">
        <div class="fee-header">
          <span>应退</span>
          <span>待办：{{ unpaidBills.todoCount }}</span>
          <span>小计：{{ unpaidBills.totalAmount }}元</span>
        </div>
        <div v-for="(bill, index) in unpaidBills.bills" :key="index" class="bill-item">
          <p>账单编号: <span class="bill-no">{{ bill.billNo }}</span> <span class="bill-type">费用账单</span></p>
          <p>护理项目名称: {{ bill.itemName || '-' }}</p>
          <p>应付金额: {{ bill.amount }}元</p>
        </div>
      </el-card>

      <!-- 欠费部分 -->
      <el-card class="fee-card">
        <div class="fee-header">
          <span>欠费</span>
          <span>待办：{{ arrearsBills.total }}</span>
          <span>小计：{{ arrearsBills.totalAmount }}元</span>
        </div>
        <div v-for="(bill, index) in arrearsBills.bills" :key="index" class="bill-item">
          <p>账单编号:<span class="bill-no">{{ bill.billNo }}</span> <span class="bill-type">月度账单</span></p>
          <p>账单月份: {{ bill.billMonth || '-' }}</p>
          <p>应付金额: {{ bill.payableAmount }}元</p>
        </div>
      </el-card>

      <!-- 余额部分 -->
      <el-card class="fee-card">
        <div class="fee-header">
          <span>余额</span>
          <span>小计：{{ (balanceBills.actualDepositRefund + balanceBills.prepaymentBalance).toFixed(2) }}元</span>
        </div>
        <div class="bill-item">
          <p>可退押金: {{ (balanceBills.depositBalance).toFixed(2) }}元</p>
          <div class="adjust-area">
            <span>实退金额:</span>
            <el-input-number v-model="balanceBills.actualDepositRefund" :min="0" :max="balanceBills.depositBalance"
              :rules="[{ required: true, message: '请填写实退金额', trigger: 'blur' }]"></el-input-number>
            <span>调整备注:</span>
            <el-input v-model="balanceBills.depositAdjustRemark" placeholder="请输入" maxlength="30"
              style="width: 300px;"></el-input>
          </div>
          <p>预缴款: {{ (balanceBills.prepaymentBalance).toFixed(2) }}元</p>
        </div>
      </el-card>

      <p class="final-amount">最终退款金额 = 应退 - 欠费 + (实退金额 + 预缴款) = <span class="haha">{{ finalRefundAmount }}</span>元</p>

      <!-- 底部按钮 -->
      <div class="bottom-buttons">
        <el-button @click="handleBack" size="default">返回</el-button>
        <el-button type="primary" @click="handleSubmit" size="default">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Check, Close, Clock } from '@element-plus/icons-vue';
import { getContent, addContent } from '@/api/drop/content';
import useUserStore from '@/store/modules/user';
import { listBillByElderlyId } from '@/api/financialManagement/accountEntryList';
import { getBalanceByElderlyIds } from '@/api/balance/balancefind';
import { getAccraditationrecordByDropContentId, updateAccraditationrecord } from '@/api/accraditationrecord/accraditationrecord';
import { getUser } from '@/api/system/user';

const roleName = ref('');

// 全量数据容器
const fullData = ref({});

// 接收父组件参数
const props = defineProps({
  stepNum: {  // 当前步骤数（固定为4）
    type: Number,
    default: 4,
    required: true
  },
  dropContentId: {  // 步骤三传递的ID
    type: [String, Number],
    default: '',
    required: true
  }
});

// 向父组件传递事件
const emit = defineEmits(['submit-step', 'back-to-list']);

// 当前登录用户
const userStore = useUserStore();
const currentUser = ref(userStore.nickName || '管理员');

// 数据存储
const basicInfo = ref({});         // 基本信息
const applyInfo = ref({});         // 申请信息
const dissolutionInfo = ref({});   // 解除记录
const operationRecords = ref([]);  // 操作记录
const eldID = ref(0);              // 老人ID

// 账单数据
const unpaidBills = ref({
  todoCount: 0,
  totalAmount: 0.00,
  bills: [{ billNo: '', itemName: '', amount: 0.00 }]
});

const arrearsBills = ref({
  total: 0,
  totalAmount: 0.00,
  bills: [{ billNo: '', billType: '', billMonth: '', payableAmount: 0.00 }]
});

const balanceBills = ref({
  depositBalance: 0.00,
  prepaymentBalance: 0.00,
  actualDepositRefund: 0.00,
  depositAdjustRemark: ''
});

// 计算最终退款金额
const finalRefundAmount = computed(() => {
  const refund = parseFloat(unpaidBills.value.totalAmount) || 0;
  const arrears = parseFloat(arrearsBills.value.totalAmount) || 0;
  const balance = (parseFloat(balanceBills.value.actualDepositRefund) || 0) +
    (parseFloat(balanceBills.value.prepaymentBalance) || 0);
  return (refund - arrears + balance).toFixed(2);
});


// 格式化退住原因
const formatReason = (reason) => {
  const reasonMap = {
    'personal': '个人原因',
    'recovery': '身体康复',
    'dissatisfaction': '服务不满意',
    'other': '其他原因'
  };
  return reasonMap[reason] || reason;
};

// 获取文件URL
const getFileUrl = (filePath) => {
  if (!filePath) return '';
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  // 如果已经是完整URL，直接返回；否则拼接baseUrl
  if (filePath.indexOf('http://') === 0 || filePath.indexOf('https://') === 0) {
    return filePath;
  }
  return baseUrl + filePath;
};

// 加载数据（从步骤三的ID获取）
const fetchData = async () => {
  if (!props.dropContentId) {
    ElMessage.error('未获取到有效的数据ID，请返回上一步重新提交');
    return;
  }

  try {
    // 1. 获取全量历史数据
    const contentRes = await getContent(props.dropContentId);
    if (contentRes.code !== 200 || !contentRes.data?.currentInfo) {
      ElMessage.error('获取历史数据失败');
      return;
    }
    fullData.value = JSON.parse(contentRes.data.currentInfo);
    eldID.value = fullData.value.elderlyId || 0;

    // 2. 填充基础信息
    basicInfo.value = {
      elderName: fullData.value.elderName || '',
      idCard: fullData.value.idCard || '',
      phone: fullData.value.phone || '',
      feePeriod: fullData.value.feePeriod || '',
      nursingLevel: fullData.value.nursingLevel || '',
      bed: fullData.value.bed || '',
      contract: fullData.value.contract || '',
      advisor: fullData.value.advisor || '',
      nurse: fullData.value.nurse || ''
    };

    // 3. 填充申请信息
    applyInfo.value = {
      checkoutDate: fullData.value.checkoutDate || '',
      reason: fullData.value.reason || '',
      remark: fullData.value.remark || '',
      applyName: fullData.value.applyName || '',
      applyTime: fullData.value.applyTime || ''
    };

    // 4. 填充解除记录
    dissolutionInfo.value = {
      dissolutionSubmitter: fullData.value.dissolutionSubmitter || '',
      dissolutionDate: fullData.value.dissolutionDate || '',
      dissolutionFile: fullData.value.dissolutionFile || ''
    };

    // 5. 加载账单数据
    if (eldID.value) {
      const billRes = await listBillByElderlyId(eldID.value);
      arrearsBills.value = {
        total: billRes.total || 0,
        totalAmount: 0,
        bills: billRes.rows || []
      };
      // 计算欠费总金额
      arrearsBills.value.totalAmount = arrearsBills.value.bills.reduce((sum, bill) => {
        return sum + (parseFloat(bill.payableAmount) || 0);
      }, 0).toFixed(2);

      // 提取应退账单（护理项目）
      const firstBill = arrearsBills.value.bills[0] || {};
      const firstItem = (firstBill.billDetails || [])[0] || {};
      unpaidBills.value = {
        todoCount: firstItem.itemName ? 1 : 0,
        totalAmount: parseFloat(firstItem.amount || 0).toFixed(2),
        bills: firstItem.itemName ? [{
          billNo: firstBill.billNo || '',
          itemName: firstItem.itemName || '',
          amount: firstItem.amount || 0
        }] : [{ billNo: '', itemName: '', amount: 0 }]
      };
    }

    // 6. 加载余额数据
    if (eldID.value) {
      const balanceRes = await getBalanceByElderlyIds(eldID.value);
      if (balanceRes.code === 200) {
        balanceBills.value = {
          ...balanceRes.data,
          actualDepositRefund: balanceRes.data.depositBalance || 0  // 初始时将可退押金赋值给实退金额
        };
      }
    }

    // 7. 构建操作记录
    operationRecords.value = [
      {
        content: '发起申请-申请退住',
        personStatus: `${fullData.value.applyName || '-'} (已发起)`,
        time: fullData.value.applyTime || '-',
        icon: ''
      },
      {
        content: '(角色) 审批-申请审批',
        personStatus: `${fullData.value.approver || '-'} (${fullData.value.approvalResult === 'approvalPass' ? '已通过' : '已拒绝'})`,
        opinion: fullData.value.approvalOpinion || '-',
        time: fullData.value.approveTime || '-',
        icon: ''
      },
      {
        content: '操作-解除合同',
        personStatus: `${fullData.value.dissolutionSubmitter || '-'} (已完成)`,
        time: fullData.value.dissolutionTime || '-',
        icon: ''
      }
    ];

  } catch (error) {
    console.error('步骤四加载数据失败：', error);
    ElMessage.error('加载数据失败，请重试');
  }
};

// 表单验证（暴露给父组件）
const validateForm = () => {
  // 校验实退金额
  if (balanceBills.value.depositBalance > 0 && balanceBills.value.actualDepositRefund <= 0) {
    ElMessage.warning('请填写有效的实退金额');
    return false;
  }

  return true;
};

// 暴露验证方法
defineExpose({
  validateForm
});

// 返回按钮
const handleBack = () => {
  emit('back-to-list');
};


function getBeijingTimeString() {
  const date = new Date();
  // 获取本地时间（东八区）的各部分，直接使用Date的get方法（而非getUTC方法）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0'); // 本地小时（0-23）
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 提交处理
const handleSubmit = async () => {
  // 1. 表单验证
  if (!validateForm()) return;

  try {
    // 2. 构造提交数据
    const submitData = {
      ...fullData.value,  // 包含前几步的所有数据
      ...basicInfo.value,
      ...applyInfo.value,
      ...dissolutionInfo.value,
      billData: {
        unpaidBills: unpaidBills.value,
        arrearsBills: arrearsBills.value,
        balanceBills: balanceBills.value,
        finalRefundAmount: finalRefundAmount.value
      },
      billSubmitter: currentUser.value,
      billSubmitTime: getBeijingTimeString(),
      currentStep: props.stepNum
    };

    // 3. 调用接口保存
    const response = await addContent({
      currentInfo: JSON.stringify(submitData)
    });

    if (response.code === 200 && response.dropContentId) {
      emit('submit-step', {
        newDropContentId: response.dropContentId,
        currentStep: props.stepNum
      });
      ElMessage.success('账单调整提交成功，进入下一步');
    } else {
      ElMessage.error(`提交失败：${response.msg || '未返回有效ID'}`);
    }

    //更新审批表 
    const approvalRecords = await getAccraditationrecordByDropContentId(props.dropContentId);
    const uodateRecord = ref({
      id: approvalRecords.data.id,
      dropContentId: response.dropContentId,
      approverName: currentUser.value,
      currentStep: "调整账单",
      nextStep: "账单审批",
      stepNo: "5",
    })
    updateAccraditationrecord(uodateRecord.value);

  } catch (error) {
    console.error('步骤四提交失败：', error);
    ElMessage.error('提交失败，请检查网络');
  }
};

// 组件挂载时加载数据
onMounted(() => {

  //获取当前用户信息
  getUser(userStore.id).then(res => {
    roleName.value = res.data.roles[0].roleName;
  });

  console.log('步骤四接收参数：', {
    stepNum: props.stepNum,
    dropContentId: props.dropContentId
  });
  fetchData();
});
</script>


<style scoped>
.other .ca {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}

.other h3 {
  margin-top: 20px;
}

.other .operation-record-card {
  margin-top: 30px;
  width: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: auto;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.record-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.record-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.processing {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.record-timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 32px;
  width: 2px;
  height: calc(100% + 4px);
  background-color: #e4e7ed;
}

.timeline-item.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.timeline-item.processing:not(:last-child)::after {
  background-color: #409eff;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-item.completed .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #67c23a;
}

.timeline-item.processing .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #409eff;
}

.timeline-content {
  flex: 1;
  padding-top: 2px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

.timeline-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.timeline-opinion {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
}

.opinion-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.opinion-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.other img {
  width: 60px;
  height: 60px;
}

.oth {
  color: #333;
  font-size: 14px;
}

.drop4-page {
  padding: 20px;
}

.left-section,
.right-section {
  display: inline-block;
  vertical-align: top;
}

.left-section {
  width: 60%;
  margin-right: 20px;
}

.right-section {
  width: 38%;
}

.info-card {
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.label {
  width: 120px;
  text-align: right;
  margin-right: 16px;
  color: #666;
  font-size: 14px;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.view-link {
  color: #409eff;
  cursor: pointer;
  margin-left: 8px;
}

.operation-record-card {
  height: 100%;
  min-height: 300px;
  /* 避免加载时卡片过矮 */
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  font-size: 14px;
  flex-wrap: wrap;
}

.record-icon {
  margin-right: 10px;
  margin-top: 2px;
}

.record-content {
  flex: 1;
  color: #333;
}

.record-content p {
  margin: 4px 0;
}

.record-time {
  width: 150px;
  text-align: right;
  color: #999;
  margin-left: 10px;
}

.approval-opinion {
  background-color: #f5f7fa;
  padding: 8px;
  border-radius: 4px;
  margin-top: 5px;
  width: 100%;
}

.adjust-fee-section {
  margin-top: 20px;
  width: 730px;
}

.tip {
  display: flex;
  font-size: 14px;
  width: 486px;
  color: #4b4b4b;
  margin-bottom: 15px;
  height: 30px;
  align-items: center;
  background-color: #c8dbfd;
}

.tip img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: 2px;
}

.fee-card {
  margin-bottom: 15px;
}

.fee-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.bill-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 5px;
}

.bill-type {
  border: 1px solid blue;
  color: blue;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

.adjust-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.adjust-area span {
  margin-right: 5px;
}

.el-input-number,
.el-input {
  margin-right: 5px;
}

.final-amount {
  color: #4b4b4b;
  margin: 15px 0;
}

.bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.loading-tip {
  text-align: center;
  padding: 50px 20px;
  color: #999;
  font-size: 14px;
}

.haha {
  margin: 0 8px;
  font-size: 18px;
  color: red;
}

.bill-no {
  color: #0168d0;
}

/* Timeline styles for v-else */
.drop4-page .record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.drop4-page .record-status {
  display: flex;
  align-items: center;
}

.drop4-page .status-badge.completed {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #95d475;
}

.drop4-page .record-timeline {
  position: relative;
}

.drop4-page .timeline-item.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.drop4-page .timeline-opinion-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.drop4-page .timeline-opinion-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
</style>